Tool Mentor: Creating Your Project Web

Purpose

To show how to create a web site for your project. This is done by modifying 'RationalProjectWebExample', a "stubbed" web site.

Most of the files in the project web are placeholders to start with, so that you easily can fit your project's information into the structure.

On the various pages and placeholders throughout your project web, comments are provided in a different style. They are supposed to be removed from the page when you have modified it. [This is an example of a comment.]

Using the Project Web Example

The 'RationalProjectWebExample' is installed when you install the Rational Unified Process. In the file system it is stored on the same level as the Rational Unified Process:

RationalProjectWebExample	Contains the project web example.
RationalUnifiedProcess6.0	Contains the Rational Unified Process.

Make a copy of 'RationalProjectWebExample' to build your own project web. For example:

MyProjectWeb	Contains your project's web.
RationalProjectWebExample	Contains the project web example.
RationalUnifiedProcess6.0	Contains the Rational Unified Process.

The 'RationalProjectWebExample' folder must be placed at the same directory level as the Rational Unified Process. The reason for this is that the are hyperlinks in the 'RationalProjectWebExample' that reference pages in the Rational Unified Process. If you decide to move the 'RationalProjectWebExample', you need to modify the hyperlinks.

To start the project web example locate the file 'RationalProjectWebExample/index.htm'.

Adding Hyperlinks to RUP

Add hyperlinks from pages in the 'RationalProjectWebExample' to pages in the Rational Unified Process. See Tool Mentor: Adding External Links to RUP. Notice that you can set the hyperlink's target frame property to 'ory_doc'. Clicking on that hyperlink will display the page in the main frame of the Rational Unified Process.

Logical and Physical Structure

Determine the logical and physical structures of your project web-site.
The logical structure refers to the structure of the web-site as perceived by the user, and which should be reflected in the Table of Contents. The physical structure is the file structure, which may or may not differ from the logical structure.

File Structure

To begin with, 'RationalProjectWebExample' has the following file structure:

RationalProjectWebExample	The frames page "index.htm" is found here.
applet	Contains files for the Treebrowser, including project_tree.htm and tree.zip (contains the tree.dat).
artifacts	A folder supplied for keeping artifacts.
css	This is where the CSS file is.
devcase	A sample development case is provided in this folder. Replace it with your own.
guidelines	A folder supplied for keeping guidelines.
iter_workflows	This folder is for iteration workflows.
main	Here most of the project webs infrastructure files are located.
plans	A folder for your project's plans.

Add, remove, rename, and move folders in your project web to match your desired file structure.
Note! that the links in the 'tree.dat' file will not be updated automatically. The tree.dat file is compressed in the 'tree.zip' file.

If you wish, you can use the html-pages for artifacts and guidelines, but it is also possible to browse them as files and folders directly. Choosing the latter will simplify maintaining the project web, but your users may be better off with the html-files.

You can modify the contents tree to create the best logical structure for your project. Various icons that are used in the Rational Unified Process are also included in the project web (RationalProjectWebExample/applet/images). If you want to create your own icons for the tree, make them 16x16 pixels large (or rather, small).

Edit 'tree.dat' (in the RationalProjectWebExample/applet/tree.zip) to match your logical structure. See Tool Mentor: Modifying the Treebrowser for information on how to do this.

Alternative Table of Contents

If you do not want to use the treebrowser, there are two alternatives provided with the 'RationalProjectWebExample':

A JavaScript based solution, see RationalProjectWebExample/main/contents_js.htm.
A simple HTML solution, see RationalProjectWebExample/main/contents_html.htm.

To use either of these, edit the file RationalProjectWebExample/index.htm to reference either of these files instead of the RationalProjectWebExample/applet/index.htm.

Cascading Style Sheets

The Rational Unified Process web uses Cascading Style Sheets for layout control, and a very similar css-file has been provided for your project web. The colors have been changed to show which pages are part of the project web and which are part of the Rational Unified Process. Feel free to modify yourself. The css-file is found in RationalProjectWebExample/css/project.css.

If you do not want to use the css-file, you can delete it or rename it. By renaming it, you "hide" it from the pages that reference it, but no error message will result from a missing css-file. It simply won't be used.
(If you choose to rename it, do so in the Windows file manager rather than a web-site creation software, since the latter is likely to update all the links and your pages will still refer to the css-file.)

For more information on Cascading Style Sheets see http://www.w3.org/TR/REC-CSS1-961217.html. See also Guideline: Rational Unified Process Style Guide

Edit the RationalProjectWebExample/css/project.css file.

To change the colors in project.css, here are some hints:

To change the banner colors for H1 and H2, look for h1.banner and h2.banner. Change background and color attributes.
To change link colors, look for a:link, a:active, and a:visited.

Edit the Frames Page

In file RationalProjectWebExample/index.htm you find the frameset definition. The project web is designed similarly to the Rational Unified Process. The index page is a frames divided page with three frames:

A small frame for a logo or the name of your project in the upper left corner, called project_name.
A left frame for a table of contents, called contents.
A main frame for displaying information, called main. At start, the main frame displays a home page.

The filenames are:

Main	RationalProjectWebExample/main/home_page.htm
Contents	RationalProjectWebExample/applet/project_tree.htm or RationalProjectWebExample/main/contents_js.htm or RationalProjectWebExample/main/contents_html.htm
Project_name	RationalProjectWebExample/main/banner.htm

Edit index.htm if you prefer a different frames set-up.
Change the title of the page to the name of your project.

Add Project Logo

A small frame in the upper left corner is intended for a project logo or name, so that people can identify the site.

Edit the file is RationalProjectWebExample/main/banner.htm, by putting in a logo-picture or enter the name of your project.

Create the Home Page

On the home page you have the opportunity to provide the project's "community home page". This is the first page displayed in the main window. On the placeholder page you will find a number of suggestions. The file's name is RationalProjectWebExample/main/home_page.htm.

Change the heading banner to the name of your project.
Change the page title to the name of your project.

Adding Search

A search function for your project web could be useful. You can either place it on a separate page, in a separate frame, or on the home page itself. Link from the table of contents.

Iteration Workflows

If you have descriptions of how you will work in iterations in the different phases of your project, there are placeholders for these. There is also an example. The placeholder files are found in the folder RationalProjectWebExample/iter_workflows.

Populate the Artifacts Folders

Under RationalProjectWebExample/artifacts space is provided for the various artifacts that will be produced in your project. A structure of the artifact sets of the Rational Unified Process is already in place with overview files and a few examples and placeholders.

If you choose to, set up links from RationalProjectWebExample/artifacts to another location in your file system.
Move, copy or link existing artifacts into the folder structure.
Create, copy, move, or link templates that are used in your project into the folder RationalProjectWebExample/artifacts/templates.
Edit the placeholder overview.htm files found under RationalProjectWebExample/artifacts and sub-folders.
Keep overview files up-to-date during the project. You can dispose of the overview files and use simple readme files instead, but some sort of information is helpful to the browsing user.

The file structure and the logical structure in the table of contents differ when it comes to the artifacts. In the table of contents the Management Artifacts, Standards & Guidelines, and Templates are parallel to Project Artifacts, but sub-folders in the file structure. Modify as you please.

Project Library

A page is supplied as a placeholder for a project library to keep things that are useful but do not fit in the regular artifacts structure. Se the placeholder page, RationalProjectWebExample/library/library.htm, for suggestions.

Create a folder structure under RationalProjectWebExample/library to suit your needs.
Move, copy or link documents, web-sites etc into the structure or onto the page.
Rename if "library" is an unsuitable concept for this in your project.

Tool Information

A page is provided as a placeholder for information on tools you are using in the project. See the placeholder page, RationalProjectWebExample/tools/tools.htm, for suggestions.

Discussion Forum

Hoping that your project web will develop into a frequently visited, vibrant project community, we suggest you put up one or several discussion forums. A placeholder page is found in your project web. FrontPage« can help you create a web with discussion groups, but it needs to be created as a new web using the Discussion Web Wizard. Please refer to FrontPage's« help section Using FrontPage/Creating and Configuring Forms/Discussion Groups for more information.

Create a discussion group web for your forums.
Link from the placeholder page or directly from the table of contents to the discussion web.

Rational Unified Process